<form id="previous-teams-form" class="sky-form sky-form-modal"
      action="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=register/addPreviousTeam"
      method="post" style="width: 650px">
    <header>Previous teams</header>

    <fieldset>
        <div class="row">
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-user"></i>
                    <input type="text" id="team" name="team" placeholder="Team">
                </label>
            </section>
            <section class="col col-6">
                <label class="select">
                    <select id="country" name="country">
                        <option value="" selected disabled>Country</option>
                        <?php foreach ($this->countries as $country): ?>
                        <option value="<?php echo $country->id;?>"><?php echo $country->name;?></option>
                        <?php endforeach; ?>
                    </select>
                    <i></i>
                </label>
            </section>
        </div>

        <section class="col col-6" style="padding-left:0px">
            <label class="label">Start</label>
        </section>

        <section class="col col-6">
            <label class="label">End</label>
        </section>

        <section class="col col-3" style="padding-left:0px">
            <label class="select">
                <select name="sMonth" id="sMonth">
                    <option value="" selected disabled>Month</option>
                    <option value="01">Jan</option>
                    <option value="02">Feb</option>
                    <option value="03">Mar</option>
                    <option value="04">Apr</option>
                    <option value="05">May</option>
                    <option value="06">Jun</option>
                    <option value="07">Jul</option>
                    <option value="08">Aug</option>
                    <option value="09">Sep</option>
                    <option value="10">Oct</option>
                    <option value="11">Nov</option>
                    <option value="12">Dec</option>
                </select>
                <i></i>
            </label>
        </section>

        <section class="col col-3">
            <label class="select">
                <select name="sYear" id="sYear">
                    <option value="" selected disabled>Year</option>
                    <option value="2013">2013</option>
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                </select>
                <i></i>
            </label>
        </section>

        <section class="col col-3">
            <label class="select">
                <select name="eMonth" id="eMonth">
                    <option value="" selected disabled>Month</option>
                    <option value="01">Jan</option>
                    <option value="02">Feb</option>
                    <option value="03">Mar</option>
                    <option value="04">Apr</option>
                    <option value="05">May</option>
                    <option value="06">Jun</option>
                    <option value="07">Jul</option>
                    <option value="08">Aug</option>
                    <option value="09">Sep</option>
                    <option value="10">Oct</option>
                    <option value="11">Nov</option>
                    <option value="12">Dec</option>
                </select>
                <i></i>
            </label>
        </section>

        <section class="col col-3">
            <label class="select">
                <select name="eYear" id="eYear">
                    <option value="" selected disabled>Year</option>
                    <option value="2013">2013</option>
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                </select>
                <i></i>
            </label>
        </section>

        <div class="row">
            <section class="col">
                <div class="previous">
                    <h1>Previous Team</h1>

                    <div class="previous_team_info">
                        <table id="tblTeams" width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr class="heading">
                                <td width="120" height="37" align="left" valign="middle"><strong>Team</strong></td>
                                <td width="200" height="37" align="left" valign="middle">Country</td>
                                <td width="120" height="37" align="left" valign="middle">Start</td>
                                <td width="120" height="37" align="left" valign="middle">End</td>
                                <td width="60" height="37" align="left" valign="middle" class="last">...</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </fieldset>

    <footer>
        <button type="submit" class="button">Add Team</button>
        <a href="#" target="previous-teams-form" class="button button-secondary modal-closer">Close</a>

        <div id="error" class="progress"></div>
    </footer>
</form>

<script type="text/javascript">
    $(function () {
        $("#previous-teams-form").validate(
                {
                    // Rules for form validation
                    rules:{
                        team:{
                            required:true
                        },
                        country:{
                            required:true
                        },
                        sMonth:{
                            required:true
                        },
                        sYear:{
                            required:true
                        },
                        eMonth:{
                            required:true
                        },
                        eYear:{
                            required:true
                        }
                    },

                    // Messages for form validation
                    messages:{
                        team:{
                            required:'Please enter team'
                        },
                        country:{
                            required:'Please enter country'
                        },
                        sMonth:{
                            required:'Please enter start month'
                        },
                        sYear:{
                            required:'Please enter start year'
                        },
                        eMonth:{
                            required:'Please enter start month'
                        },
                        eYear:{
                            required:'Please enter start year'
                        }
                    },

                    // Ajax form submit
                    submitHandler:function (form) {
                        $(form).ajaxSubmit(
                                {
                                    beforeSend:function () {
                                        $('#previous-teams-form button[type="submit"]').addClass('button-processing').attr('disabled', true);

                                        var request = $.ajax({
                                            url:'<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=register/checkTeam',
                                            type:'post',
                                            data:{
                                                sMonth:$('#sMonth').val(), eMonth:$('#eMonth').val(),
                                                sYear:$('#sYear').val(), eYear:$('#eYear').val()
                                            },
                                            dataType:'json',
                                            async:false
                                        });
                                        if (request.responseText == 'true') {
                                            $('#error').text('');
                                            return true;
                                        } else {
                                            $('#error').text('Period is not valid');
                                            $('#previous-teams-form button[type="submit"]').removeClass('button-processing').removeAttr('disabled');
                                            return false;
                                        }
                                    },
                                    success:function () {
                                        $('#previous-teams-form button[type="submit"]').removeClass('button-processing').removeAttr('disabled');

                                        var html = '<tr>' +
                                                '<td width="120" height="37" align="left" valign="middle"><strong>' + $('#team').val() + '</strong></td>' +
                                                '<td width="200" height="37" align="left" valign="middle">' + $("#country :selected").text() + '</td>' +
                                                '<td width="120" height="37" align="left" valign="middle">' + $('#sMonth').val() + '/' + $('#sYear').val() + '</td>' +
                                                '<td width="120" height="37" align="left" valign="middle">' + $('#eMonth').val() + '/' + $('#eYear').val() + '</td>' +
                                                '<td width="60" height="37" align="left" valign="middle" style="cursor: pointer" class="last" ' +
                                                'onclick="$(this).parent().remove()">X</td>' +
                                                '</tr>';
                                        $('#tblTeams > tbody:last').append(html);

                                        $('#team').val('');
                                        $('#country').val('');
                                        $('#sMonth').val('');
                                        $('#sYear').val('');
                                        $('#eMonth').val('');
                                        $('#eYear').val('');
                                    }
                                });
                    },

                    // Do not change code below
                    errorPlacement:function (error, element) {
                        error.insertAfter(element.parent());
                    }
                });
    });
</script>